// 4.4 Simple Transformations

import QtQuick 2.9


//文档中元素的顺序很重要，在代码中先出现的元素有更低的堆叠顺序(叫做z顺序值z-order)
//如果出现重叠，后出现的元素将覆盖在前面的元素上面
//z轴顺序也可以使用元素对象的z-property来控制

Item {
    width: bg.width; height: bg.height

    Image {
        id: bg
        source: "images/background.png"
    }

    MouseArea {
        id: backgroundClicker
        //need to before the images as order matters
        anchors.fill: parent
        onClicked: {
            //reset our little scene
            circle.x = 84
            box.rotation = 0
            triangle.rotation = 0
            triangle.scale = 1.0
        }
    }

    ClickableImage {
        id: circle
        x: 84; y: 68; z: 3
        source: "images/circle_blue@2x.png"
        antialiasing: true                  //抗锯齿
        onClicked: {
            //increase the x-postion on click
            x += 20
        }
    }

    ClickableImage {
        id: box
        x:164; y:68; z: 2
        source: "images/box_green@2x.png"
        antialiasing: true
        onClicked: {
            //increase the rotation on click
            rotation += 15
        }
    }

    ClickableImage {
        id: triangle
        x: 248; y: 68; z: 1
        source: "images/triangle_red@2x.png"
        antialiasing: true
        onClicked: {
            //several transformation
            rotation += 15
            scale += 0.05
        }
    }
}
